<template lang="html">
  <div>
    <div class="con-tou">
      <span>潜力新书</span>
      <div class="box-nav">
        <router-link to="/shou/nanQ">男生</router-link>
        <router-link to="/shou/nvQ">女生</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
  .con-tou {
      width: 95%;
      height: 30px;
      margin: 20px auto 0;
      padding: 0 10px;
      line-height: 30px;
      background: white;
      span {
          font-size: 17px;
      }
      .box-nav{
        width: 50%;
        float: right;
        display: flex;
        justify-content: space-between;
        a{
          display: block;
          width: 50%;
          height:30px;
          background: #EEEEEE;
          border:1px solid #EEE;
          color:black;
          text-align: center;
          text-decoration: none;
          line-height: 30px;
        }
        .router-link-active{
          color:white;
          background: #E98110;
        }
      }
  }
</style>
